<template>
  <div class="app-container">
    <!-- 返回按钮 -->
    <el-row class="mb8">
      <el-col :span="24">
        <el-button icon="el-icon-back" size="small" @click="goBack">返回列表</el-button>
      </el-col>
    </el-row>

    <!-- 任务基本信息 -->
    <el-card class="mb8">
      <div slot="header" class="card-header">
        <span class="card-title">验收任务信息</span>
        <el-tag :type="getStatusTag(taskDetail.taskStatus)" size="medium">
          {{ getStatusText(taskDetail.taskStatus) }}
        </el-tag>
      </div>
      
      <el-descriptions :column="3" border>
        <el-descriptions-item label="任务号">{{ taskDetail.taskNo }}</el-descriptions-item>
        <el-descriptions-item label="收货单号">{{ taskDetail.receiveOrderNo }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ taskDetail.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="验收类型">
          <el-tag :type="getInspectTypeTag(taskDetail.inspectType)" size="small">
            {{ getInspectTypeText(taskDetail.inspectType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="验收员">{{ taskDetail.inspectorName || '未分配' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ taskDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ taskDetail.startTime || '未开始' }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ taskDetail.completeTime || '未完成' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="3">{{ taskDetail.remark || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 验收进度 -->
    <el-card class="mb8">
      <div slot="header" class="card-header">
        <span class="card-title">验收进度</span>
      </div>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="progress-item">
            <div class="progress-value">{{ taskDetail.totalLines || 0 }}</div>
            <div class="progress-label">总行数</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progress-item">
            <div class="progress-value inspected">{{ taskDetail.inspectedLines || 0 }}</div>
            <div class="progress-label">已验收</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progress-item">
            <div class="progress-value qualified">{{ taskDetail.qualifiedQuantity || 0 }}</div>
            <div class="progress-label">合格数量</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="progress-item">
            <div class="progress-value unqualified">{{ taskDetail.unqualifiedQuantity || 0 }}</div>
            <div class="progress-label">不合格数量</div>
          </div>
        </el-col>
      </el-row>
      
      <el-row class="mt20">
        <el-col :span="24">
          <div class="progress-bar-container">
            <span class="progress-label">验收进度：</span>
            <el-progress 
              :percentage="getProgress()" 
              :status="getProgressStatus()"
              :stroke-width="12"
              class="progress-bar">
            </el-progress>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 验收明细 -->
    <el-card>
      <div slot="header" class="card-header">
        <span class="card-title">验收明细</span>
        <div class="card-actions">
          <el-button v-if="taskDetail.taskStatus === 'pending'" type="primary" size="small" icon="el-icon-edit" @click="handleStartInspect">开始验收</el-button>
          <el-button v-if="taskDetail.taskStatus === 'in_progress'" type="success" size="small" icon="el-icon-check" @click="handleComplete">完成验收</el-button>
        </div>
      </div>
      
      <el-table :data="taskDetail.details" border stripe>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="商品编码" prop="productCode" width="120" />
        <el-table-column label="商品名称" prop="productName" width="200" show-overflow-tooltip />
        <el-table-column label="规格" prop="specification" width="120" />
        <el-table-column label="批次号" prop="batchCode" width="120" />
        <el-table-column label="收货数量" prop="receiveQuantity" width="100" align="center" />
        <el-table-column label="验收数量" prop="inspectQuantity" width="100" align="center" />
        <el-table-column label="合格数量" prop="qualifiedQuantity" width="100" align="center" />
        <el-table-column label="不合格数量" prop="unqualifiedQuantity" width="100" align="center">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.unqualifiedQuantity > 0 ? '#F56C6C' : '' }">
              {{ scope.row.unqualifiedQuantity || 0 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="验收结果" prop="inspectResult" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.inspectResult" :type="getInspectResultTag(scope.row.inspectResult)" size="small">
              {{ getInspectResultText(scope.row.inspectResult) }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="货位" prop="shelfCode" width="120" />
        <el-table-column label="验收时间" prop="inspectTime" width="160" />
        <el-table-column label="备注" prop="remark" min-width="150" show-overflow-tooltip />
      </el-table>
    </el-card>

    <!-- 验收历史 -->
    <el-card class="mt20" v-if="inspectHistory.length > 0">
      <div slot="header" class="card-header">
        <span class="card-title">验收历史</span>
      </div>
      
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in inspectHistory"
          :key="index"
          :timestamp="item.createTime"
          :type="getHistoryType(item.action)">
          <div class="history-item">
            <div class="history-action">{{ getHistoryText(item.action) }}</div>
            <div class="history-operator">操作人：{{ item.operatorName }}</div>
            <div v-if="item.remark" class="history-remark">备注：{{ item.remark }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { getInspectTask, completeInspectTask } from '@/api/wms/inspect'

export default {
  name: 'InspectDetail',
  data() {
    return {
      loading: false,
      taskId: null,
      taskDetail: {
        details: []
      },
      inspectHistory: []
    }
  },
  created() {
    this.taskId = this.$route.params.id
    if (this.taskId) {
      this.getTaskDetail()
    }
  },
  methods: {
    // 获取任务详情
    getTaskDetail() {
      this.loading = true
      getInspectTask(this.taskId).then(response => {
        this.taskDetail = response.data
        this.inspectHistory = response.data.history || []
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    // 返回列表
    goBack() {
      this.$router.go(-1)
    },

    // 开始验收
    handleStartInspect() {
      this.$router.push({
        path: '/wms/inspect/operation',
        query: { taskId: this.taskId }
      })
    },

    // 完成验收
    handleComplete() {
      this.$confirm('确认完成验收?', '提示', { type: 'warning' }).then(() => {
        completeInspectTask(this.taskId).then(() => {
          this.$message.success('完成成功')
          this.getTaskDetail()
        })
      })
    },

    // 获取进度百分比
    getProgress() {
      if (!this.taskDetail.totalLines || this.taskDetail.totalLines === 0) return 0
      return Math.round((this.taskDetail.inspectedLines || 0) / this.taskDetail.totalLines * 100)
    },

    // 获取进度状态
    getProgressStatus() {
      const progress = this.getProgress()
      if (progress === 100) return 'success'
      if (progress > 0) return 'active'
      return null
    },

    // 获取状态标签类型
    getStatusTag(status) {
      return { 'pending': 'info', 'in_progress': 'warning', 'completed': 'success' }[status] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      return { 'pending': '待验收', 'in_progress': '验收中', 'completed': '已完成' }[status] || status
    },

    // 获取验收类型标签类型
    getInspectTypeTag(type) {
      return { 'full': 'danger', 'sample': 'warning', 'skip': 'success' }[type] || 'info'
    },

    // 获取验收类型文本
    getInspectTypeText(type) {
      return { 'full': '全检', 'sample': '抽检', 'skip': '免检' }[type] || type
    },

    // 获取验收结果标签类型
    getInspectResultTag(result) {
      return { 'qualified': 'success', 'unqualified': 'danger', 'partial': 'warning' }[result] || 'info'
    },

    // 获取验收结果文本
    getInspectResultText(result) {
      return { 'qualified': '合格', 'unqualified': '不合格', 'partial': '部分合格' }[result] || result
    },

    // 获取历史记录类型
    getHistoryType(action) {
      return { 'create': 'primary', 'start': 'warning', 'complete': 'success', 'cancel': 'danger' }[action] || 'info'
    },

    // 获取历史记录文本
    getHistoryText(action) {
      return { 'create': '创建任务', 'start': '开始验收', 'complete': '完成验收', 'cancel': '取消任务' }[action] || action
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.card-actions {
  display: flex;
  gap: 10px;
}

.progress-item {
  text-align: center;
  padding: 20px 0;
  border-radius: 8px;
  background: #f8f9fa;
}

.progress-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.progress-value.inspected {
  color: #409EFF;
}

.progress-value.qualified {
  color: #67C23A;
}

.progress-value.unqualified {
  color: #F56C6C;
}

.progress-label {
  font-size: 14px;
  color: #606266;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-bar {
  flex: 1;
}

.history-item {
  padding: 10px 0;
}

.history-action {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.history-operator {
  font-size: 12px;
  color: #909399;
  margin-bottom: 3px;
}

.history-remark {
  font-size: 12px;
  color: #606266;
}

.mb8 {
  margin-bottom: 8px;
}

.mt20 {
  margin-top: 20px;
}
</style>